<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Map </title> 
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?v=3&sensor=false&language=zh-CN"></script>
<script type="text/javascript" src="js/gmap_exp.js"></script>
<script type="text/javascript" src="js/map_helper.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<!--弹出层控件-->
<link type="text/css" rel="stylesheet"href="images/popup_laye.css" />
<script type="text/javascript" src="js/popup_layer.js"></script>
<script type="text/javascript">
//封装操作对象
var maphelper = null;
//信息窗口
var infowindow = null;
var mapobj = null;
$(function() {
    var mapCanvas = document.getElementById("map_canvas");
    //地图选项
    var myOptions = {
		 		//初始缩放级别
        zoom: 12,
       	//显示中心位置      
        center: new Array(117.209888, 31.852471),  
				//取消默认的控件
        disableDefaultUI: false,   
				//缩放移动控件   
        navigationControl: true,   
			 //街景
		streetViewControl: false,
			 //地图类型控件           
        mapTypeControl: false, 
			 //比例尺控件   
		scaleControl: true,    
		mapTypeId: OFFLINE_MAP,
		mapPath:"maptile/yahoomaps/roadmap/",
		mapFileExt:"png"
    };

    maphelper = new mapHelper();
    mapobj = maphelper.initMap(mapCanvas, myOptions);
		
		
		maphelper.bindInstanceEvent(mapobj, 'mousemove', function(event){
	  	$("#CLAT").val(event.latLng.lat());
			$("#CLNG").val(event.latLng.lng());
		});
		maphelper.bindInstanceEvent(mapobj, 'zoom_changed', function(event){
			$("#ZOOM").val(maphelper.getZoom());
		});				

	 	var offset = $("#DIR_PANEL").offset();
		x = -offset.left+3;
		y = -(offset.top+$("#DIR_PANEL").height());
		new PopupLayer({trigger:"#DIR_PANEL",popupBlk:"#blk",closeBtn:"#close",
		offsets:{
			x:x,
			y:y
		}
	});
});

//指定地图缩放级别
function SetZoom() {
    var level = $("#MAP_LEVEL").val();
    maphelper.setZoom(level);
}
function MovePoint() {

    var lat = $("#LAT").val();
    var lng = $("#LNG").val();
    var zoom = $("#ZOOM").val();
    maphelper.movePoint(lng,lat,zoom);
    var obj11  = maphelper.markerPoint({
        lat: lat,
        lng: lng
    });
}

function FindPoint() {
    var address = $("#ADDRESS").val();
    maphelper.findPoint(address);

}
var marker1 = null;
function EventMarker() {
    var marker1 = maphelper.markerPoint({
        lat: 31.852471,
        lng: 117.209888,
        title: '测试'
    });
	maphelper.bindInstanceEvent(marker1, 'click', toggleBounce);
		//添加事件
  /* var MapsEvent = new google.maps.event.addListener(marker, 'click',
    function(event) {
        //event:反馈事件信息, map:当前map对象, marker:标记点对象
        toggleBounce(event, maphelper.map, marker);
    });*/
}
function Flicker()
{
	//marker1.setVisible(false);	
	marker1.setFlicker(true);
}
function ClearMarkerEvent()
{
	maphelper.clearEvents();
}
function toggleBounce(event, map, marker) {

    //	alert(event.latLng);	
    //	alert(getMethodAndPropertys(event));

    //标记动画
    if (marker.getAnimation() != null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
    var contentString = '<div id="content"><div></div><h1>我的标签</h1><div id="bodyContent"><p class = "mapStyle">当前位置 ' 
	+ event.latLng + '<br><a href="http://www.google.com.hk" target="_blank">详细信息</a></div></div>' ;
	
		if(infowindow)
			infowindow.close();
    infowindow = new google.maps.InfoWindow({ //根据HTML初始化infowindow
        content: contentString
    });
    infowindow.open(map, marker);
}


function MarkerIcon() {
    var content = '<div id="content">' + //点击标记后显示自定义的内容
    '<div>' + '</div>' + '<h1>小汽车</h1>' + '<div id="bodyContent">' + '<p class = "mapStyle">当前位置 lat:31.852471, lng:117.229888<br><a href="http://www.google.com.hk" target="_blank">详细信息</a>' + '</div>' + '</div>';
    var marker = maphelper.markerPoint({
        lat: 31.852471,
        lng: 117.229888,
        title: '小汽车',
        icon: "images/car.png"		
		
    });
		maphelper.bindInstanceEvent(marker, 'mouseover', 
			function(event,map,marker) {
				 infowindow = new google.maps.InfoWindow({ //根据HTML初始化infowindow
            content: content
        });
        infowindow.open(maphelper.map, marker);
			}
		);
		maphelper.bindInstanceEvent(marker, 'mouseout',
			function() {
				if(infowindow)
						infowindow.close();
			}
		); 
	 // document.write(printObj(marker)) ;
}

var dots = Array();	
function Polyline() {
		ClearPoly();
		alert("点击地图进行画线");
		//画线坐标 维度,经度
		var color = $("#COLOR").val();
		var weight = $("#WEIGHT").val();
		var opacity = $("#OPACITY").val();	

			maphelper.bindInstanceEvent(mapobj, 'click',   
		   function(event) {			 
				dots.push(new Array(event.latLng.lng(),event.latLng.lat()));
		 		//画线
	 			var poly = maphelper.polyline({
						dots:dots,						
						color:color,
						weight:weight,
						opacity:opacity
				});
   			$("#total_km").empty().text((poly.getLength()/1000).toFixed(3) + "km");  			    
   });  
}

var polygon = null;
function Polygon() {
		ClearPoly();
		alert("点击地图进行绘制");
		var color = $("#STROKE_COLOR").val();
		var opacity = $("#STROKE_OPACITY").val();	
		var fcolor = $("#FILL_COLOR").val();
		var fopacity = $("#FILL_OPACITY").val();	
	
			maphelper.bindInstanceEvent(mapobj, 'click',   
		   function(event) {			 
				dots.push(new Array(event.latLng.lng(),event.latLng.lat()));
		 		
				//画多边形
					if(dots.length == 1){
					polygon =  maphelper.polygon({
							dots:dots,						
							color:color,
							opacity:opacity,
							fillcolor:fcolor,
							fillopacity:fopacity
					});
				}else	{
					var path = polygon.getPath();
					path.push(event.latLng);
					polygon.setPath(path);
				}
								
		});  
}
function ClearPoly() {
	dots = [];
	maphelper.clearPoly();
	maphelper.clearLine();
	$("#total_km").text("");
	maphelper.clearInstanceEvent(mapobj, 'click');
}
 
function Circle()
{
		ClearPoly();
		alert("点击地图进行绘制");
		var color = $("#STROKE_COLOR").val();
		var opacity = $("#STROKE_OPACITY").val();	
		var fcolor = $("#FILL_COLOR").val();
		var fopacity = $("#FILL_OPACITY").val();	
	
		maphelper.bindInstanceEvent(mapobj, 'click',   
	   function(event) {	
			
				var circleObj =  maphelper.circle({
						lat:event.latLng.lat(),
						lng:event.latLng.lng(),						
						color:color,
						opacity:opacity,
						fillcolor:fcolor,
						fillopacity:fopacity,
						radius: "1000"
			});		
		});
}


function ShowLatLng(event) 
{
    var infoWindowPoly = new google.maps.InfoWindow();              
    var contentString = "<b>你点线啦</b><br />";
    contentString += "点击位置: <br />" + event.latLng.lat() + "," + 
		event.latLng.lng() + "<br />";
		//消息框内容
    infoWindowPoly.setContent(contentString);
		//消息框弹出位置
    infoWindowPoly.setPosition(event.latLng);
		//点击线的时候显示线的弹出框
    infoWindowPoly.open(maphelper.map);                 
}


function printObj(obj) {
    var result = [];
    for (var id in obj) {
        try {
            if (typeof(obj[id]) == "function") {
                result.push("function " + id + ": " + obj[id].toString());
            } else {
                result.push("property " + id + ": " + obj[id].toString());
            }
        } catch(err) {
            result.push(id + ": inaccessible");
        }
    }
    return result;
}

function Navigation()
{
	var from = $("#FROM").val();
	var to = $("#TO").val();
	var mode = $("#NAV_MODEL").val();
	var highways = $("#HIGHWAYS").attr("checked");
	var tolls = $("#TOLLS").attr("checked");
	var dirPanel = "directionsPanel";
	var way = $("#WAY").val();
	if(way != "")
		var locations = new Array(way);
		//var locations = way.split(","); 

	var option = {from:from, to:to, mode:mode, highways:highways, tolls:tolls, dirPanel:dirPanel, locations:locations};
	//导航
	var dirDisplay = maphelper.navigation(option);
	//获取距离
	maphelper.bindInstanceEvent(dirDisplay, 'directions_changed', function() {
	
		  var total = 0;
		  var myroute = dirDisplay.directions.routes[0];
		  for (i = 0; i < myroute.legs.length; i++) {
		    total += myroute.legs[i].distance.value;
		  }
		  total = total / 1000.
		  document.getElementById("total").innerHTML = total + " km";
  })
}

function ClearNav()
{
	maphelper.clearNav();
	$("#directionsPanel").html("");
}
</script>
</head>
    
<body>

<div style="margin:0px;border:1px solid #cfdfe4;">
		<div style="width:30%;margin:4px;padding:4px;float:left;">
			<fieldset>
				<legend>鼠标在地图中位置</legend>
				经度<input  type="text" name="CLNG" id="CLNG" value="" size="17"/>&nbsp;&nbsp;
				维度<input  type="text" name="CLAT" id="CLAT" value="" size="17"/>
				</fieldset>
			<fieldset>
				<legend>地图缩放控制</legend>
				<input type="button" onclick="maphelper.zoomIn();" value=" 放 大 "/>
				<input type="button" onclick="maphelper.zoomOut();" value=" 缩 小 "/>
				<input type="button" onclick="SetZoom();" value=" 指定地图缩放级别 "/>
				<input type="text" name="MAP_LEVEL" id="MAP_LEVEL" value="8" size="2"/>
				0-21
				当前级别<input  type="text" name="ZOOM" id="ZOOM" value="8" size="17"/>

			</fieldset>
			<fieldset>
				<legend>定位移动</legend>
				<input type="button" onclick="MovePoint();" value=" 移动到 "/><br/>				
				经度
				<input type="text" name="LNG" id="LNG" value="117.209888" size="10"/>
				维度
				<input type="text" name="LAT" id="LAT" value="31.852471" size="10"/>
				缩放
				<input type="text" name="ZOOM" id="ZOOM" value="" size="3"/>
			</fieldset>
			<fieldset>
				<legend>搜索定位</legend>
				<input type="button" onclick="FindPoint();" value=" 搜索定位 "/>
				<input type="text" name="ADDRESS" id="ADDRESS" value="合肥梦圆小区" size="20"/>
				<input type="button" onclick="maphelper.clearMarker();" value="清除所有标记"/>
			</fieldset>
			<fieldset>
				<legend>标记点绑定事件</legend>
				<input type="button" onclick="EventMarker();" value=" 测试 "/>	
				<input type="button" onclick="Flicker();" value=" 闪烁 "/>			
				<input type="button" onclick="MarkerIcon();" value=" 测试自定义标记 "/>			
				<input type="button" onclick="ClearMarkerEvent();" value=" 删除事件 "/>				
			</fieldset>
			
			<fieldset>
				<legend>点击画线</legend>
				<input type="button" onclick="Polyline();" value=" 画线 "/> <span id="total_km"></span><br/>
				颜色
				<input type="text" name="COLOR" id="COLOR" value="#FF0000" size="8"/>(十六进制颜色)<br/>
				透明度
				<input type="text" name="OPACITY" id="OPACITY" value="1.0" size="2"/>(0.0-1.0)
				宽度
				<input type="text" name="WEIGHT" id="WEIGHT" value="2" size="2"/>像素

				<input  type="button" onclick="ClearPoly()" value="清除"/>
			</fieldset>		
			<fieldset>
				<legend>叠加图层</legend>
				<input type="button" onclick="Polygon();" value="多边形"/> 				
				<!--<input type="button" onclick="Rectangle();" value="矩形"/> 	-->			
				<input type="button" onclick="Circle();" value="圆形 "/> <br/>
				边色
				<input type="text" id="STROKE_COLOR" value="#FF0000" size="8"/>(十六进制颜色)
				边宽
				<input type="text" id="STROKE_WEIGHT" value="3" size="2"/>像素<br/>
				填充色
				<input type="text" id="FILL_COLOR" value="#ffb5b5" size="8"/>
				透明度				
				<input type="text" id="FILL_OPACITY" value="0.3" size="2"/>(0.0-1.0)
		
				<input  type="button" onclick="ClearPoly()" value="清除"/>
			</fieldset>		
						
			<fieldset>
				<legend>路线导航</legend>
				<input type="button" onclick="Navigation();" value=" 导航 "/>&nbsp;
			 <input  type="button" id='DIR_PANEL' value="导航信息"/>
			 <span id="total"></span>
			 <br/>	
				<select id="NAV_MODEL">
					<option value="DRIVING">驾车</option>	
					<option value="WALKING">步行</option>
				</select>
				从
				<input type="text" name="FROM" id="FROM" value="31.852,117.209" size="15"/>
				到
				<input type="text" name="TO" id="TO" value="合肥火车站" size="15"/><br/>
				途经(地名或纬经度)
				<input type="text" name="WAY" id="WAY" value="合肥科技馆" size="49"/>
				
				<br>
				<label><input type="checkbox" id="HIGHWAYS" />使用高速公路</label>
				<label><input type="checkbox" id="TOLLS" />使用收费公路</label>
				&nbsp;&nbsp;<br/>
				<input  type="button" onclick="ClearNav()" value="清除路线和导航信息"/>
				<div id="blk" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>导航信息</h2>
                <a href="javascript:void(0)" id="close" class="closeBtn">关闭</a>
								<br/>
                <div id="directionsPanel"></div>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>	
			</fieldset>		
		</div>			
	   <div id="map_canvas" style="margin:4px ;width:68%; height:690px;float:right;border:1px solid #cfdfe4"></div>
		<div style="clear:both;"></div>
</div>
</body>
</html>